@import "normalize.scss";
@import "article.scss";
@import "//at.alicdn.com/t/font_897211_vesou8vlmmk.css";

$primary-color: #FEB307;

html {
    font-size: 10px;
}

body {
    min-width: 1200px;
    font-family: Helvetica Neue,
    Luxi Sans,
    DejaVu Sans,
    Tahoma,
    Hiragino Sans GB,
    Microsoft Yahei,
    sans-serif;
}

.inline_block {
    display: inline-block;
    box-sizing: content-box;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clean {
    clear: both;
}

.header {
    color: #1C1F33;
    background:rgba(255, 255, 255, 1);
    box-shadow:2px 2px 10px 0px rgba(28, 31, 51, 0.2);

    width: 100%;
    min-width: 1200px;
    position: fixed;
    top: 0;
    z-index: 999;

    .service,
    .nav {
        position: relative;
        height: 60px;
        // line-height: 60px;
        .notice,
        .menu {
            display: inline-block;

            li {
                display: inline;
            }
            .submenu:hover .tools {
                display: block;
            }
        }
    }

    .service {
        background: rgba(210, 210, 214, 1);
        height: 36px;
        line-height: 36px;
        font-size: 1.4rem;
        .iconfont {
            font-size: 1.5rem;
        }
    }

    .telephone, .service_entry {
        position: absolute;
        display: inline-block;
        margin-left: 40px;
        .entry {
            display: inline-block;

            a {
                color: inherit;
                text-decoration: none;
            }
        }
    }

    .telephone {
        left: 0;

        .hotline {
            display: inline-block;
            margin-right: 4rem;
        }
    }

    .service_entry {
        right: 0;
        margin-right: 40px;

        .entry {
            margin-right: 4rem;
            &:last-child {
                margin-right: 0;
            }
        }
    }

    .nav {
        .logo,
        .menu,
        .menu_list,
        .userinfo {
            display: inline-block;
            // outline: 1px solid darkcyan;
        }

        .logo {
            margin: 0 0 0 40px;
            height: 60px;
            
            .image_tag {
                margin-top: 1rem;
                height: 35px;
            }
        }
        .menu {
            position: absolute;
            right: 40px;

            .menu_list {
                box-sizing: border-box;
                width: 560px;
                font-size: 1.6rem;
                height: 60px;
                &>div {
                    box-sizing: border-box;
                    float: left;
                    line-height: 60px;
                    text-align: center;
                    width: 20%;
                    &>a {
                        color: #000;
                        text-decoration: none;

                        &:link,
                        &:visited {
                            color: #000;
                            text-decoration: none;
                        }

                        &:hover {
                            color: $primary-color;
                        }

                        &:active {
                            color: #000;
                            text-decoration: none;
                        }
                    }
                }
            }
        }
        .userinfo {
            float: right;
            line-height: 60px;
            vertical-align: middle;
            height: 60px;
            box-sizing: border-box;
            text-align: right;
            width: 300px;
            font-size: 14px;
            .enterpriseName, .userName{
                text-decoration: underline;
                cursor: pointer;
            }
            .userName{
                color: #e84f5a;
                margin-left: 6px;
            }
            .sign_out{
                margin-left: 20px;
                cursor: pointer;
            }
            a{
                color: inherit;
            }
        }
    }

    .tools {
        position: relative;
        top: -16px;
        right: 0px;
        display: none;
        width: 400px;
        height: 6.8rem;
        background: #545454;
        color: #fff;
        font-size: 1.6rem;
		z-index: 2000;
        dd {
            margin-inline-start: 0;
            float: left;
            width: 25%;
            a {
                color: #fff;
                text-decoration: none;
            }

            &:hover a {
                color: $primary-color;
            }

            .icon {
                width: 100%;
                height: 48px;
                line-height: 4rem;
                .iconfont {
                    font-size: 2.6rem;
                }
            }
            .desc {
                height: 2.2rem;
                line-height: 2.2rem;
            }
        }
    }
}

.banner {
    min-width: 1200px;
    width: 100%;
    height:400px;
    padding-top: 96px;
    background-image: url('https://hpx-pc.oss-cn-beijing.aliyuncs.com/guide/banner.png');
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    margin-bottom: 1em;
    color: white;
    font-size: 30px;
    line-height: 400px;
    text-align: center;
    letter-spacing: .2em;

    .slogan {
        margin: auto;
        width: 100%;
        height: 100%;
        background-image: url(https://hpx-pc.oss-cn-beijing.aliyuncs.com/guide/slogan.svg);
        background-repeat: no-repeat;
        background-size: 400px 100px;
        background-position: center;
    }
}

.main {
    min-width: 1200px;
    width: 1200px;
    margin: auto;
    margin-bottom: 2em;
    // padding-top: 96px;
}

.main .submenu {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    width:190px;
    height:310px;
    font-size: 16px;
    background:rgba(254, 179, 7, 0.1);
    border:1px solid rgba(254, 179, 7, 1);
    text-align: center;
    color: #000;
    margin-right: 20px;
    ul {
        list-style: none;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 0;
        -webkit-padding-start: 0;
        -webkit-margin-before: 0;
        -webkit-margin-after: 0;
        margin: 0;
        padding-left: 0;
        li {
            width:180px;
            height:50px;
            line-height: 50px;
            background: #fff;
            a{
                text-align: left;
                text-indent: 12px;
                .iconfont{
                    font-size: 28px;
                    vertical-align: middle;
                    display: inline-block;
                    margin-top: -2px;
                }
            }
        }
    }

    a {
        display: block;
        text-decoration: none;
        transition: 0.3s ease-in-out;
        &:link,
        &:visited {
            color: rgba(93, 97, 123, 1);
        }
        &:hover {
            background: rgba(254, 179, 7, 1);
            color: #fff;
        }
    }
}
.main .helpCenter{
    height: 302px;
    ul{
        li{
            width: 100%;
        }
    }
}

.main .content {
    display: inline-block;
    width:980px;
    min-width: 980px;
    box-shadow:2px 2px 10px 0px rgba(28, 31, 51, 0.2);
    .intro{
        width: 900px;
        margin: 0 auto;
        text-align: center;
        font-size:14px;
        color:rgba(28,31,51,1);
        line-height:22px;
    }
}
//注册协议
.main .agreement{
    margin-top: 20px;
    width: 1200px;
    box-shadow: none;
    .article-entry{
        padding: 0;
        color: #3a3a3a;
        p{
            line-height: 30px;
        }
    }
    .strong{
        font-weight: 700;
    }
}
//banner内页
.banner_inner_page{
    width: 100%;
    margin: 0;
    padding-top: 96px;
    .banner_inner{
        display: block;
        width: 100%;
        .article-entry{
            padding: 0;
            position: relative;
            p{
                margin: 0;
                line-height: 0;
                img{
                    width: 100%;
                    height: 100%;
                    // display: inline;
                }
                .linkBtn{
                    position: absolute;
                    bottom: 115px;
                    width: 298px;
                    height: 78px;
                    left: 50%;
                    margin-left: -150px;
                }
            }
        }
    }
}
//视频
.main .video_page{
    width: 1200px;
    padding-top: 96px;
    .article-entry{
        padding: 20px;
    }
}
.main .animate_video{
    width: 1200px;
    box-shadow: none;
    padding-top: 96px;
    margin-top: 20px;
}

// ------------- pageFooter -------------
.footer {
    font-size: 1.6em;
    background: rgba(28, 31, 51, 1);
    color: rgba(255, 255, 255, 1);
    height: 173px;
    padding: 30px 0 20px;
    a{
        color: inherit;
        text-decoration: none;
    }

    .footerContainer {
        width: 1200px;
        min-width: 1200px;
        height: 138px;
        margin: auto;
    }

    .serviceInfo,
    .guide,
    .qrcode {
        // display: inline-block;
        height: 100%;
        float: left;
    }

    .serviceInfo {
        width: 45.83333%;
        text-align: left;
        .serviceHotline {
            font-size: 2.4rem;
            color: #fff;
            height: 33px;
            line-height: 33px;
            margin-bottom: 10px;
        }

        .serviceTime {
            color: #d2d2d6;
            font-size: 1.6rem;
            height: 22px;
            line-height: 22px;
            margin: 10px 0 24px 0;
        }
        .cropAddress {
            font-size: 1.4rem;
            color: #d2d2d6;
            height: 22px;
            line-height: 22px;
            margin-bottom: 24px;
        }
    }

    .guide {
        margin: auto;
        width: 20.83333%;
        div {
            box-sizing: border-box;
            display: inline-block;
            // width: 130px;
            line-height: 22px;
            font-size: 1.6rem;
            margin-bottom: 18px;
            margin-right: 50px;
            &:nth-child(1),&:nth-child(2){
                margin-top: 6px;
            }
        }
        a {
            text-decoration: none;
            color: #fff;
            &:link,
            &:visited {
                color: #fff;
            }

            &:hover {
                color: #fff;
            }
        }
    }

    .qrcode {
        width: 33.33333%;
        text-align: right;
        dl {
            display: inline-block;
            // width: 45%;
            width: 120px;
            font-size: 1.4rem;
            margin: 0;
            margin-left: 5px;
            text-align: center;
            dd {
                margin-inline-start: 0px;
                margin-left: 0px;
            }
        }
        dl dt img {
            width: 100px;
            height: 100px;
        }
    }

    .copyright {
        width: 1200px;
        height: 36px;
        line-height: 36px;
        margin: 0 auto;
        // text-align: center;
        color: #d2d2d6;
        font-size: 1.4rem;
        div{
            float: left;
            &:nth-child(1){
                width: 45.83333%;
            }
            &:nth-child(2){
                img{
                    width: 120px;
                    height: 36px;
                    margin-right: 16px;
                    float: left;
                    &:nth-child(4){
                        cursor: pointer;
                    }
                }
            }
        }
        .sslslogn{
            width: 120px;
            height: 36px;
            display: inline-block;
            .wosign{
                img{
                    width: 120px;
                    height: 36px;
                }
            }
        }
    }
}

/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 14px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 14px;
    background: rgba(0, 0, 0, .3);
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0, 0, 0, .3);
}

@import "news.scss";
@import "suppor.scss";